Introduction to Web Design - 13. HTML Form Handling
13.1 CGI Scripts | 13.2 Python | 13.3 PHP 13.4 Using the mailto action |
  1. Preface
  2. Markup Languages – A Definition and Some History
  3. Beginning HTML
  4. HTML Lists
  5. HTML Tables
  6. HTML - Color, Fonts and Special Characters
  7. HTML Links
  8. HTML Images
  9. HTML Frames
  10. Cascading Style Sheets
  11. MicroSoft PhotoDraw
  12. JavaScript
  13. HTML Forms and Form Handling
  14. VBScript
  15. MicroSoft FrontPage
  16. Active Server Pages
  17. Java Applets
  18. XML Meaning and More
  19. Macromedia Flash 5.0
  20. References
When a user submits data via an HTML form, code must be written to get the user input to the right place. Sometimes, the input is emailed to a person and sometimes it is saved directly to a file. The original way of handling input to HTML forms was with CGI Scripts. This section deals primarily with CGI Scripts. For an introduction to HTML forms, see section 12.8 HTML Forms

Now, there are a number of additional ways to handle HTML form input. PHP and MicroSoft Active Server Pages using VBScript are examples of these other methods of handling HTML form input. PHP is discussed briefly at the end of this section. VBScripts are covered in the next section of these pages.

13.1 CGI Scripts

CGI stands for Common Gateway Interface. CGI is a standard protocol (or interface) that is used on WWW servers that runs programs as a result of user actions. The programs accessed via CGI can be programmed in a number of different languages. Thus, the term “scripts” in “CGI Scripts” can refer to scripts (which are files containing instructions to the operating system) and to executable programs. CGI Scripts are often programs that respond to user input in HTML forms. For example, a CGI Script may add an email address to a mailing list. CGI Scripts are executed on the server, and are therefore server-side scripts.

Web Servers often have a special directory called cgi-bin. CGI Scripts are stored in this directory. When the user fills out an HTML form and clicks the “submit” button which has been directed to a CGI Script, the web server receives the form information and passes it through the CGI interface. The CGI interface allows programs in the cgi-bin directory to be executed. Often the program sends some information back to the user. The returned information is often in the form of an HTML file. This information is sent out through CGI, through the server, and the Internet and is displayed on the user’s browser.

There are a number of different types of languages that can be used to create CGI scripts. These include shell scripts (which execute operating systems commands), Perl programs, C++ programs, Python and PHP.

When data from an HTML form is submitted with the POST method to a server via CGI, the information from the form is submitted as one long string of encoded characters. The form data is separated into form_tag_name=value pairs, separated by ampersands (&). Any spaces that are in the form_tag_name or the value will be replaced by plus signs (+). Other special characters that might be in the form_tag_name or value, such as ampersands, plus signs, etc., are replaced with their hexadecimal (base 16) ASCII code.

In order to interpret the data when the data is received, we need to undo the ASCII coding and separate the data into form_tag_name value pairs. Fortunately, there are packages to do this de-coding for us and we no longer need to do it ourselves.
13.1.1 Shell Scripts
In the UNIX operating system, one accesses the basic system via one of a number of “shells”. Each shell has a slightly different syntax for executing commands at the UNIX prompt. A shell script is a file containing a series of these types of commands.

(See Br. David Carlson’s pages on UNIX (http://cis.stvincent.edu/carlsond/cs330/unix/bshellref AND http://cis.stvincent.edu/carlsond/cs330/unix/unix.html) or any LINUX or UNIX reference book.

The program that does the form data decoding for us on the LINUX system in the CIS lab is “uncgi”. This program allows us to access the value of the data submitted by using the form_tag_name with “$WWW_” added to the front of it. Consider the following HTML form: 

<FORM METHOD="POST" ACTION="../../../../cgi-bin/uncgi/handle-custinfo2">

<P>
<STRONG>Your first name:</STRONG>
<INPUT TYPE="TEXT" NAME="FName" SIZE="16" MAXLENGTH="28">
</P>

<P>
<STRONG>Your last name:</STRONG>
<INPUT TYPE="TEXT" NAME="LName" SIZE="16" MAXLENGTH="28">
</P>

<P>
<STRONG>Your email address:</STRONG>
<INPUT TYPE="TEXT" NAME="EmailAddress" SIZE="42" MAXLENGTH="56">
</P>

<P>
<STRONG>Your phone:</STRONG>
<INPUT TYPE="TEXT" NAME="Phone" SIZE="22" MAXLENGTH="52">
</P>

<P>
Please list your interests and hobbies.  This information will be used to send
information specific to your needs to you.<BR>
<TEXTAREA NAME="Interests" ROWS="8" COLS="64">
</TEXTAREA>
</P>

<P>
<INPUT TYPE="submit" VALUE="Send">
<INPUT TYPE="reset" VALUE="Clear the form">
</P>
</FORM>


Now, look at the Shell Script that obtains the data, sends the data in an email, and sends an HTML reply back to the user. This script consists of LINUX commands, such as echo which whatever follows on the line, date which gets the current date and time, and cat which concatenates whatever follows. 

#! /bin/sh

echo "TO: martincc" >>  /www/cgi-bin/cust.txt
echo >> /www/cgi-bin/cust.txt
cho "New Customer Information: ">> /www/cgi-bin/cust.txt

date >> /www/cgi-bin/cust.txt
echo >> /www/cgi-bin/cust.txt
echo "First Name: $WWW_FName" >> /www/cgi-bin/cust.txt
echo "Last Name: $WWW_LName" >> /www/cgi-bin/cust.txt
echo "Email address: $WWW_EmailAddress" >> /www/cgi-bin/cust.txt
echo "Phone: $WWW_Phone" >> /www/cgi-bin/cust.txt
echo >> /www/cgi-bin/cust.txt
echo "Interests and Hobbies:" >> /www/cgi-bin/cust.txt
echo "$WWW_Interests" >> /www/cgi-bin/cust.txt
echo >> /www/cgi-bin/cust.txt

/usr/sbin/sendmail -t < "/www/cgi-bin/cust.txt"

/bin/rm cust.txt

echo Content-type: text/html
echo

#<< Standard input comes from here through next tag at start of line.

cat << EOF
   <HTML>
   <HEAD>
   <TITLE>Automated Reply</TITLE>
   </HEAD>
   <BODY>
   <H2>Your Information has been sent.</H2>
   <P>  $WWW_FName </P>
   <p>
   You will be added to our email list.  Please allow up to 7 days for your request to be processed.
   </P>
   </BODY>
   </HTML>
EOF


The first line of this script tells the system to use the “sh” or shell interpreter to read this file. The next line prints to a file called “cust.txt”, by using the echo command re-directed to a file. The re-direction is done with the re-direction operator, “>>”. All of the data submitted in the form is printed to that file. Note that the form data values are in variables starting with “$WWW_” and ending with the form_tag_name from the form above. For example, the user input to the text box called “FName” is accessed in the script as “$WWW_Fname”.

After all of the form data has been written to the “cust.txt” file, the file is emailed using the “sendmail” command. Then, the file is deleted using the “rm” command.

An HTML file is generated using the “cat” command. This will be sent out via the CGI interface, then the server, to the user’s browser.

The HTML form for this example is in cust-info.htm. The script file is handle-custinfo2. An example of the email that was received from filling out the HTML form is in the file cgi-email.txt.
13.1.2 Perl Scripts
Perl stands for Practical Extraction and Report Language. It was developed by Larry Wall in the late 1980’s. Wall wanted to create a powerful language that was flexible and had a lot of text processing capabilities.

Perl is probably the most common programming language used in CGI Scripts. Perl is an interpreted language. Interpreted languages need to be run by an interpreter. They are not compiled into executable programs. The interpreter translates and executes the instructions in the program one instruction at a time.

There are three basic data types in Perl: scalar, array and hash. Scalar data can be a string, an integer or floating point number. Scalar variables begin with “$”. Arrays contain more than one scalar data value. Array variables begin with “@”. Hash variables begin with “%” and contain more than one data value that is accessed with a “key”. type starts with a different character. In Perl, variables are not declared. They are created when they are first used.

Perl has versatile and powerful string processing functions that make it relatively easy to de-code form data sent via the POST method. However, the Perl syntax for those commands is quite unintelligible without going into the commands in some depth. Therefore, the string processing functions of Perl will not be discussed in this document.

Fortunately, Perl also has a number of modules available, which are pre-defined sets of functions. The module that we are most interested in is the CGI module. This module contains functions that greatly simplify the process of CGI scripting. It provides easy access to the values of a form and provides functions that generate HTML tags.

The following Perl program writes the user input to a file and sends an HTML reply back to the user. 

#!/usr/bin/perl -w
# Program to read information sent to the server
# from the form in custinfopl.htm

use CGI qw( :standard );

$fname = param( "FName" );
$lname = param( "LName" );
$email = param( "EmailAddress" );
$phone = param( "Phone" );
$interests = param( "Interests" );

#opens file for appending
open( CUSTFILE, ">>cust.dat" );

#writes to the file
print( CUSTFILE $fname );
print( CUSTFILE $lname );
print( CUSTFILE "\n" );
print( CUSTFILE $email );
print( CUSTFILE "\n" );
print( CUSTFILE $phone );
print( CUSTFILE "\n" );
print( CUSTFILE $interests );
print( CUSTFILE "\n" );

#closes the file
close( CUSTFILE );

# prints content type text
print( header() );  

print( start_html( {title => "Form Results" } ) );

print( "Hi " );
print( "$firstName" );
print( "!" );

print( "\nThank you for completing the survey." );
print( br(), "You have been added to the mailing list", br() );

print("<table border = 8>");

print( Tr( th( "Name" ),
              th( "E-mail" ),
              th( "Phone" ),
              th( "Interests" ) ),

          Tr( td( "$fname $lname" ),
              td( $email ),
              td( $phone ),
              td( $interests ) ) );


print( "</table>" );

print( end_html() );


In Perl, the pound character, “#”, is used for comments. Anything on a line following the pound sign is ignored by the Perl interpreter.

The first line of the program begins with “#!”. This is sometimes referred to as “shebang“. It is used at the beginning of a Perl program to indicate the location of, or the directory path to, the Perl interpreter on a computer.

The “uses” line tells the Perl interpreter to use the standard CGI package. The next five lines assign the form values associated with the form_tag_names to Perl variables, which begin with “$”.

Then, the data file is opened. The user information is written to the file, and the file is closed. Note that there is no comma, between the file handle “CUSTFILE” and the data written to the file.

Next, print statements are used in conjunction with Perl functions that generate HTML tags. For example, the line 

print( start_html( {title => "Form Results" } ) );


generates the beginning <HTML> tag, the <HEAD> tags and the <TITLE> tags. HTML tags can also be written directly, as is done with the <TABLE> tags.

The HTML file example is cust-infopl.htm and the Perl script is cust-info.pl. An example of the data file created by the Perl script is in the file cust-pl.txt.
13.1.3 C++ Programs
Shell and Perl scripts are not the only languages used for CGI Scripts. Scripts can be written in C++. In that case, the C++ code must be compiled into an executable file and then called directly.

13.2 Python

Python is an interpreted object-oriented language that incorporates elements from other programming languages. It can be used to create CGI Scripts as well as building GUI applications and has database interactivity functions. Because it is interpreted, it facilitates rapid development time, since each line of code can be tested on its own, without having to re-compile for every change.

13.3 PHP

PHP is a scripting language that was developed specifically for server-side scripting. PHP code can be inserted directly into HTML pages with <?php … ?> tags. In order for the server to interpret PHP, PHP must be installed and configured on the server. PHP has built-in database and form handling capabilities.

13.4 Using the mailto action

The simplest way of handling form data is to use "mailto" as the action attribute in the beginning form tag. E.g.

<form action="mailto:email address" method="post" enctype="text/plain">

where the email address is an actual email address for the person who is to receive the data. The mailto action is the easiest to use because it does not use the CGI gateway at all. While it is the easiest, there are some disadvantages. Older browsers do not support the mailto action. There are privacy concerns. For example, the email address of the person receiving the data is available to anyone who views the source code of the page containing the form and information in the form is not encrypted. Also, depending upon the user's browser, when the user submits the form, they may see the form data in the outgoing email message in their email software. This may be confusing for some users, and requires them to actually send the message, which requires them to click another button before the data is actually sent.

References

  1. Anderson-Freed, S. (2002) Weaving a Website: Programming in HTML, Javascript, Perl and Java. Prentice-Hall:NJ. ISBN 0-13-028220-0
  2. Dietel, H. M., Dietel, P. J. & Neito, T. R. (2001) Internet & World Wide Web: How to Program. 2nd Edition. Prentice Hall, NJ.
  3. Carey, P. & Kemper, M. (2003) New Perspectives on Creating Web Pages with HTML and XML - Comprehensive. Thomson Course Technology:Boston ISBN 0-619-10115-6.

Cynthia J. Martincic
cynthia.martincic@email.stvincent.edu
CIS Department
Saint Vincent College
Latrobe, PA 15650